<template>
  <div>
    <dl class="list" v-for="(item,index) in data" :key="index">
      <dt>{{item.name}} <span class="jump"
                              v-init-tooltips="{
       tableName: item.tableName,
       systemid: item.systemid,
       bsh: item.phone,
       bshlx: '004'
        }">{{item.phone}}</span></dt>
      <dd>
        <span>通联次数:{{item.callNumber}}  &nbsp;&nbsp; 最后通联时间:{{item.lastTime}}</span>
      </dd>
      <dt>
      <span class="text">
        <span class="title">实名</span>
        (<span class="num">{{item.realName.length}}</span>)
      </span>
        <span class="load" @click.stop="loadAll(index)">
        <span v-if="loadCode === index">收起 <i class="iconfont icon-arrow-up"></i></span>

        <span v-else>查看全部 <i class="iconfont icon-down-trangle"></i></span>
      </span>
      </dt>
      <dd class="lab-box" :ref="'labRef'+index">
        <lab-list :data="item.realName"></lab-list>
      </dd>
      <dt>
      <span class="text">
        <span class="title">真实身份</span>
        (<span class="num">{{item.identity.length}}</span>)
      </span>
      </dt>
      <dd>
        <ul class="id-list">
          <li v-for="(itemI,indexI) in item.identity" :key="indexI">
            {{itemI.name}}（<span class="jump" v-init-tooltips="{
              tableName: itemI.tableName,
              systemid: itemI.systemid,
              bsh: itemI.idcard,
              bshlx: '001'
            }">{{itemI.idcard}}</span>）
            <span class="tags" v-for="(itemLab,indexLab) in itemI.lab" :key="indexLab">{{itemLab}}</span>
          </li>
        </ul>
      </dd>
    </dl>
  </div>
</template>

<script>
  import LabList from './lab-list'

  export default {
    name: 'friends-list',
    components: {
      LabList
    },
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        loadCode: -1
      }
    },
    methods: {
      /**
       * 查看全部实名
       * @param index
       */
      loadAll(index) {
        const loadDOM = this.$refs['labRef' + index][0] || this.$refs['labRef' + index]
        if (loadDOM) {
          if (this.loadCode === -1) {
            loadDOM.style.height = 'auto'
            loadDOM.style.overflow = 'visible'
            this.loadCode = index
          } else {
            loadDOM.style.height = '2rem'
            loadDOM.style.overflow = 'hidden'
            this.loadCode = -1
          }
        }
      }
    },
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  dl.list {
    margin-left: 2.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #cccccc80;
    > dt {
      color: #333;
      font-size: 1.05rem;
      display: inline-block;
      width: calc(100% - .5rem);
      padding-right: .5rem;
      line-height: 1.1;
      margin: .5rem auto;
      > .text {
        float: left;
        padding-left: .6rem;
        border-left: 2px solid #44a3ec;
        color: #999;
        > .title {
          color: #333;
        }
        > .num {
          color: #f44646;
        }
      }
      > .load {
        float: right;
      }
    }
    > dd {
      margin-left: 0;
      &.lab-box {
        height: 2rem;
        overflow: hidden;
        .lab {
          padding-left: 0;
          margin: 0;
        }
      }
      > .id-list {
        padding-left: 0;
        margin: 0;
        color: #333;
        font-size: .9rem;
        > li {
          margin-bottom: .3rem;
          .tags {
            font-size: .5rem;
            background: #ff6600;
            padding: 0 .5rem;
            color: #fff;
            font-weight: normal;
            border-radius: .6rem;
            margin-right: .1rem;
            display: -webkit-inline-box;
          }
        }
      }
    }
  }
</style>
